<%@ page import="java.util.Map" %>
<%@ page import="java.util.Set" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
	Map<String,String> stage2Possibility = (Map<String, String>) application.getAttribute("stage2Possibility");
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>

<script type="text/javascript">
	var gStage2Possibility={
		<%
			Set<String> set = stage2Possibility.keySet();
			for(String key:set){
				String possibility = stage2Possibility.get(key);
		%>
		"<%=key%>":"<%=possibility%>",
		<%
			}
		%>
	};
	$(function () {
		$(".timeTop").datetimepicker({
			minView:"month",
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:true,
			todayBtn:true,
			pickerPosition:"top-left"
		})
		$(".timeBottom").datetimepicker({
			minView:"month",
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:true,
			todayBtn:true,
			pickerPosition:"bottom-left"
		})
		$("#create-customerName").typeahead({
			source: function (query, process) {
				$.get(
						"workbench/transaction/getCustomerName.do",
						{ "name" : query },
						function (data) {
							process(data);
						},
						"json"
				);
			},
			delay: 500
		});
		$("#create-stage").click(function () {
			var stage = $("#create-stage").val();
			var possibility = gStage2Possibility[stage];
			$("#create-possibility").val(possibility);
		})
		$("#btn-save").click(function () {
			$.ajax({
				url:'workbench/transaction/save.do',
				type:'post',
				dataType:'json',
				data:{
					owner:$.trim($("#create-owner").val()),
					money:$.trim($("#create-money").val()),
					transactionName:$.trim($("#create-transactionName").val()),
					expectedDate:$.trim($("#create-expectedDate").val()),
					customerName:$.trim($("#create-customerName").val()),
					stage:$.trim($("#create-stage").val()),
					type:$.trim($("#create-type").val()),
					source:$.trim($("#create-source").val()),
					activityId:$.trim($("#create-activityId").val()),
					contactsId:$.trim($("#create-contactsId").val()),
					description:$.trim($("#create-description").val()),
					contactSummary:$.trim($("#create-contactSummary").val()),
					nextContactTime:$.trim($("#create-nextContactTime").val()),
				},
				success:function (data) {
					if (data.success){
						alert("添加成功跳转到初始页");
						window.location.href="workbench/transaction/index.jsp";
					}else {
						alert("添加失败请重试");
					}
				}
			});
		})
		$("#btn-searchActivity").click(function () {
			getActivityByCond();
			$("#findMarketActivity").modal("show");
		})
		$("#create-activity").click(function () {
			getActivityByCond();
			$("#findMarketActivity").modal("show");
		})
		$("#btn-searchContacts").click(function () {
			getContactsByCond();
			$("#findContacts").modal("show");
		})
		$("#create-contacts").click(function () {
			getContactsByCond();
			$("#findContacts").modal("show");
		})
		$("#input-searchActivity").keyup(function (event) {
			if(event.keyCode==13){
				getActivityByCond();
			}
		})
		$("#input-searchContacts").keyup(function (event) {
			if(event.keyCode==13){
				getContactsByCond();
			}
		})
		$("#findMarketActivity").on("click","input[name='activity']",function () {
			var $checkedobj = $("input[name='activity']:checked");
			$("#create-activityId").val($checkedobj.val());
			$("#create-activity").val($checkedobj.parent().next().html());
			$("#findMarketActivity").modal("hide");
		});
		$("#findContacts").on("click","input[name='contacts']",function () {
			var $checkedobj = $("input[name='contacts']:checked");
			$("#create-contactsId").val($checkedobj.val());
			$("#create-contacts").val($checkedobj.parent().next().html());
			$("#findContacts").modal("hide");
		});

	})
	function createActivityHtml(data) {
		var html='';
		html+='<tr>';
		html+='<td><input type="radio" name="activity" value="'+data.id+'"/></td>';
		html+='<td>'+data.name+'</td>';
		html+='<td>'+data.startDate+'</td>';
		html+='<td>'+data.endDate+'</td>';
		html+='<td>'+data.owner+'</td>';
		html+='</tr>';
		return html;
	}
	function getActivityByCond(){
		$.ajax({
			url:'workbench/transaction/getActivityByCond.do',
			type:'get',
			dataType:'json',
			data:{
				name:$.trim($("#input-searchActivity").val())
			},
			success:function (data) {
				$("#activityShowBody").empty();
				var html='';
				$.each(data,function (index,element) {
					html = createActivityHtml(element);
					$("#activityShowBody").append(html);
				})
			}
		});
	}
	function createContactsHtml(data) {
		var html='';
		html+='<tr>';
		html+='<td><input type="radio" name="contacts" value="'+data.id+'"/></td>';
		html+='<td>'+data.fullname+'</td>';
		html+='<td>'+data.email+'</td>';
		html+='<td>'+data.mphone+'</td>';
		html+='</tr>';
		return html;
	}
	function getContactsByCond(){
		$.ajax({
			url:'workbench/transaction/getContactsByCond.do',
			type:'get',
			dataType:'json',
			data:{
				name:$.trim($("#input-searchContacts").val())
			},
			success:function (data) {
				$("#contactsShowBody").empty();
				var html='';
				$.each(data,function (index,element) {
					html = createContactsHtml(element);
					$("#contactsShowBody").append(html);
				})
			}
		});
	}
</script>
</head>
<body>

	<!-- 查找市场活动 -->	
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
					  <div class="form-group has-feedback">
						<input type="text" id="input-searchActivity" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						<span class="glyphicon glyphicon-search form-control-feedback"></span>
					  </div>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody id="activityShowBody">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->	
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
					  <div class="form-group has-feedback">
						<input type="text" id="input-searchContacts" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询">
						<span class="glyphicon glyphicon-search form-control-feedback"></span>
					  </div>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="contactsShowBody">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="btn-save">保存</button>
			<button type="button" class="btn btn-default" onclick="window.history.back()">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-owner">
					<option></option>
				  <c:forEach items="${userList}" var="u">
					  <option value="${u.id}" ${u.id==user.id?"selected":""}>${u.name}</option>
				  </c:forEach>
				</select>
			</div>
			<label for="create-money" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-money">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-transactionName">
			</div>
			<label for="create-expectedDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control timeBottom" id="create-expectedDate">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-customerName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-customerName" placeholder="支持自动补全，输入客户不存在则新建">
			</div>
			<label for="create-stage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="create-stage">
			  	<option></option>
				<c:forEach items="${stage}" var="s">
					<option value="${s.value}">${s.text}</option>
				</c:forEach>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-type" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-type">
				  <option></option>
					<c:forEach items="${transactionType}" var="t">
						<option value="${t.value}">${t.text}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-possibility">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-source" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-source">
				  <option></option>
					<c:forEach items="${source}" var="s">
						<option value="${s.value}">${s.text}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-activity" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" id="btn-searchActivity"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-activity" readonly>
				<input type="hidden" id="create-activityId">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contacts" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" id="btn-searchContacts"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-contacts" readonly>
				<input type="hidden" id="create-contactsId">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-description" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-description"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control timeTop" id="create-nextContactTime" >
			</div>
		</div>
		
	</form>
</body>
</html>